import { FC } from 'react';
import { Pressable, StatusBar, StyleSheet, Text, TextStyle, View } from 'react-native';

import IconHeaderBack from '@svgs/icon_close.svg';
import IconMore from '@svgs/icon_more.svg';

import useHeaderBar from './hook';
import { pxToVh, pxToVw } from '@/utils/pxToVx';
export interface HeaderBarProps {
  // title
  title?: React.ReactNode; // title of header bar
  // right icon
  rightIcon?: React.ReactNode; // right icon of header bar
  // left icon
  leftIcon?: React.ReactNode; // left icon of header bar
  showBack?: boolean;
  onBack?: () => void;
  moreIcon?: React.ReactNode; // right icon of header bar
  showMore?: boolean;
  onMore?: () => void;
  textStyle?: TextStyle;
}

const HeaderBar: FC<HeaderBarProps> = ({
  title,
  rightIcon,
  leftIcon,
  showBack = true,
  onBack,
  showMore = false,
  onMore,
  moreIcon,
  textStyle,
}) => {
  const { handleClickHeaderBack } = useHeaderBar();
  return (
    <View style={styles.header_wrapper}>
      <StatusBar animated={true} backgroundColor={'#fff'} barStyle={'dark-content'} />
      <View style={styles.title_wrapper}>
        <Text style={[styles.header_title, textStyle]}>{title}</Text>
      </View>
      {showBack ? (
        <Pressable
          style={styles.back}
          onPress={onBack ? onBack : handleClickHeaderBack}
          hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
        >
          {leftIcon ? leftIcon : <IconHeaderBack />}
        </Pressable>
      ) : (
        <View />
      )}

      <View style={styles.right_icon}>{rightIcon ? rightIcon : null}</View>
      {showMore ? <Pressable onPress={onMore}>{moreIcon ? moreIcon : <IconMore />}</Pressable> : null}
    </View>
  );
};

const styles = StyleSheet.create({
  header_wrapper: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    height: pxToVh(44),
    position: 'relative',
    paddingHorizontal: pxToVw(16),
  },
  title_wrapper: {
    position: 'absolute',
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 0,
  },
  header_title: {
    fontSize: pxToVh(17),
    fontWeight: '600',
    lineHeight: pxToVh(22),
    color: '#000',
  },
  right_icon: {},
  back: {
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default HeaderBar;
